<template>
  <div id="screen" class="container" style="background: #0d141e">

    <div class="screenbox">

      <div class="titBox">
        <img class="titbg" src="@/assets/img/titbg.png">
        <div class="dateBox">
          {{date}} <img @click="toggle" src="@/assets/img/scale.png">
        </div>
      </div>
      <div class="contentBox">
        <div ref="chinaMap" style="width: 100%;height:100%" id="map"></div>
        <div class="left">
          <div class="plate" style="padding-bottom: 10px">
            <div class="ptit">
              <img src="@/assets/img/timg.png">设备管理
            </div>
            <div class="devBox" >
              <div class="item" @click="goDevice">
                <div class="info">
                  <div style="color: #2EE2F3" class="num">{{deviceInfo.sensorCounts}}</div>
                  <div class="name">设备总数</div>
                </div>
                <img src="@/assets/img/dev1.png" />
              </div>
              <div class="item" @click="goDeviceOnline">
                <div class="info">
                  <div style="color: #41E99D" class="num">{{deviceInfo.sensorOnLineCounts}}</div>
                  <div class="name">在线数</div>
                </div>
                <img src="@/assets/img/dev2.png" />
              </div>
              <div class="item" @click="goDeviceUnonline">
                <div class="info" >
                  <div style="color: #EB6624" class="num">{{deviceInfo.sensorUnOnlineCounts}}</div>
                  <div class="name">离线数</div>
                </div>
                <img src="@/assets/img/dev3.png" />
              </div>
              <div class="item" @click="goWarn">
                <div class="info">
                  <div style="color: #FFB700" class="num">{{deviceInfo.sensorWarningCounts}}</div>
                  <div class="name">预警数</div>
                </div>
                <img src="@/assets/img/dev4.png" />
              </div>
            </div>
          </div>
          <div class="plate" style="padding-bottom: 0">
            <div class="ptit">
              <img src="@/assets/img/timg.png">连接状态
            </div>
            <div class="deviceName">
				<div class="deviceNameOi">
					<div :class="isActive ? 'active' : 'inactive'">{{connection.sensor_name}}</div>
				</div>              
            </div>
            <div class="timeBox">
              <div class="item item1">
                <div class="time">
				   <div :class="isActive ? 'active' : 'inactive'">{{connection.unOnlineHours}}h</div>
			    </div>
                <div class="name">离线时间</div>
              </div>
              <div class="item item2">
                <div class="time">
				   <div :class="isActive ? 'active' : 'inactive'">{{connection.onLineHours}}h</div>
				</div>
                <div class="name">在线时间</div>
              </div>
              <div class="item item3">
                <div class="time">
				  <div :class="isActive ? 'active' : 'inactive'">{{connection.sensorWarnCounts}}</div>
				</div>
                <div class="name">报警总数</div>
              </div>
            </div>
          </div>
          <div class="plate" style="padding-top: 10px">
            <div class="ptit">
              <img src="@/assets/img/timg.png">预警信息统计
            </div>
            <div class="listBox">
              <div class="tab">
                <div class="item" style="width: 40%">预警时间</div>
                <div class="item" style="width: 20%">设备名称</div>
				<div class="item" style="width: 20%">预警阀值</div>
                <div class="item" style="width: 20%">预警项</div>
                <div class="item" style="width: 20%">预警值</div>
				 
              </div>
              <div class="rowBox">
                <div class="row" v-for="(item,i) in alertList" :key="item+i">
                  <div class="item" style="width: 40%">{{item.date}}</div>			 
                  <div class="item" style="width: 20%">{{item.device_name}}</div>
				   <div class="item" style="width: 20%">{{item.threshold_value}}</div>
				
                  <div class="item" :style="{'width':'20%','color':item.color}">{{item.parameter_code}}</div>
                  <div class="item" :style="{'width':'20%','color':item.color}">{{item.aw}}</div>
				   
                </div>
              </div>

            </div>
          </div>
        </div>
        <div class="center">
          <div class="dataBox">
            <div class="tit"><img src="@/assets/img/titname.png"></div>
            <div class="item item1">
              {{realTimeInfo.t}}<span>T</span>
            </div>
            <div class="item item2">
              {{realTimeInfo.g}}<span>G</span>
            </div>
            <div class="item item2">
              {{realTimeInfo.m}}<span>M</span>
            </div>
          </div>

          <div class="plate" style="padding-top: 10px">
            <div class="ptit">
              <img src="@/assets/img/timg.png">最新数据
            </div>
            <div class="listBox">
              <div class="tab" style="padding-right: 15px;">
				  <div style="display: flex;width: 100%;"> 
                <div class="item" style="width: 20%">时间</div>
                <div class="item" style="width: 10%">终端编码</div>
                <div class="item" style="width: 10%">设备编码</div>
                <div class="item" style="width: 10%">设备名称</div>
                <div class="item" style="width: 10%">温度</div>
                <div class="item" style="width: 10%">密度</div>
                <div class="item" style="width: 10%">粘度</div>
                <div class="item" style="width: 10%">介电常数</div>
                <div class="item" style="width: 10%">含水量</div>
				</div>
              </div>
              <div class="rowBox">
                <div class="row" v-for="(item,i) in newDataList" :key="item+i">
                  <div class="item" style="width: 20%">{{item.date}}</div>
                  <div class="item" style="width: 10%">{{item.sensor_sn}}</div>
                  <div class="item" style="width: 10%">{{item.device_code}}</div>
                  <div class="item" style="width: 10%">{{item.device_name}}</div>
                  <div class="item" style="width: 10%">{{item.temper}}</div>
                  <div class="item" style="width: 10%">{{item.dens}}</div>
                  <div class="item" style="width: 10%">{{item.vis}}</div>
                  <div class="item" style="width: 10%">{{item.diel}}</div>
                  <div class="item" style="width: 10%">{{item.ppm}}</div>
                </div>
              </div>

            </div>
          </div>
        </div>
        <div class="right">
          <div class="plate">
            <div class="ptit">
              <img src="@/assets/img/timg.png">终端运行统计
            </div>
            <div id="chart1"></div>
          </div>
          <div class="plate" style="margin-top: 30px">
            <div class="ptit">
              <img src="@/assets/img/timg.png">油品信息统计
            </div>
            <div style="position: relative">
              <div style="transform: translateY(-15px)" id="chart2">  </div>
              <div style="transform: translateY(-15px)" class="yuan">
                <img src="@/assets/img/yuan.png">
              </div>


            </div>
          </div>
          <div class="plate">
            <div class="ptit">
              <img src="@/assets/img/timg.png">设备类型统计
            </div>
            <div id="chart3"></div>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
//	import Vue from 'vue'
 
import screenfull from "screenfull/dist/screenfull";
// import china from '@/assets/china.json'
import china from '@/assets/map/china.json'
import world from '@/assets/map/world.json'
import * as echarts from 'echarts';
import {dataSource as ds} from "@/services";


// 使用vue-socket.io
// import VueSocketIO from 'vue-socket.io';
//  import { io } from 'socket.io-client'
// const socket = io('ws://localhost:8097/ws');

// Vue.use(new VueSocketIO({
//   connection: socket
// }));

import {
  getDevicesHasPosition, getDeviceTypeStatistics,
  getOilInfo,
  getSensordatas,
  getSensorManageInfo,// getSensorsCodes,
  getSensosTypeCounts,
  getWarningdatas,
  searchSenorInfo
} from "@/services/screen";
  export default {
    name: 'Demo',
	sockets: {
	    connect: function() {
	      console.log('Connected to WebSocket server');
	    },
	    publicMessage(message) {
	      console.log('Received message from server:', message);
	    }
	  },
    data(){
      return{
		socket: null,
        isFull:false,
        sensor_name:'',
        worldAndChina:{},
        connection:{
			sensor_name:'',
			sensorOnLineCounts:0,
			onLineHours:0,
			sensorWarnCounts:0
		},
        currentIndex:0,
        timer:null,
        timers:null,
        realTimeInfo:{},
        deviceInfo:{
			sensorCounts:0,
			sensorOnLineCounts:0,
			sensorUnOnlineCounts:0,
			sensorWarningCounts:0
		},
        parasInfo:{},
        date:'',
        newDataList:[],
        alertList:[],
		isActive:false
      }
    },
	created(){
		// this.connect();
	},
    mounted() {
      let data = this.decode(china);
      let worldAndChina = Object.assign({}, world);
      worldAndChina.features = worldAndChina.features.concat(data.features);
      this.worldAndChina=worldAndChina;
      if(this.timers==null){
        this.timers=setInterval(()=>{
          this.setDate();
        },1000)
      }
      this.getMapData();
      this.getTerminal()
      this.getOil()
      this.getdevice();
      //this.getRealTime();
      this.getNewData();
      this.getAlert();
      this.getSensrsCodes();
      this.getDeviceManagement();
      window.goDetails = ()=> {
        let data=this.parasInfo;

        window.open(window.location.origin + "/#/device/details?id="+data.device_code)
      }
    },
    beforeDestroy(){
      if(this.timers){
        clearInterval(this.timers)
		clearInterval(this.timer)     //切换页面，链接状态关闭
		 
        this.timers=null
      }
	  if (this.socket) {
	        this.socket.close();
	      }
	  // console.log("关闭页面 beging")
	  // console.log("关闭页面")
	  //  console.log(this.timers)
	  // console.log("关闭页面 end")
    },
    methods:{
		 
		goDeviceOnline(){
			this.$router.replace({path:"/device/manage",query:{online:1}})
		},
		goDeviceUnonline(){
			this.$router.replace({path:"/device/manage",query:{online:0}})
		},
       goDevice(){
		   this.$router.replace("/device/manage")
	   },
	   goWarn(){
		    this.$router.replace("/monitor/early-warning")
	   },
      setDate(){
        let now = new Date();
        let year = now.getFullYear();
        let month = this.padZero(now.getMonth() + 1); // 月份是从 0 开始的，所以要加 1
        let day = this.padZero(now.getDate());
        let hour = this.padZero(now.getHours());
        let minute = this.padZero(now.getMinutes());
        let second = this.padZero(now.getSeconds());
        this.date=year+'/'+month+'/'+day+' '+hour+':'+minute+':'+second
      },
      padZero(num) {
        return num < 10 ? '0' + num : num;
      },
      //设备管理
      getDeviceManagement(){
        getSensorManageInfo().then((res) => {
           // console.log(res.sensorsManage.sensorCounts);
          this.deviceInfo=res.sensorsManage
        }).catch(() => {

          });
      },
	 
      getSensrsCodes(){
        let that=this;
      
          if(this.timer){
            clearInterval(this.timer);
            this.currentIndex=0;
          }
     
			   let sensorInfo0 = sessionStorage.getItem('densorInfos')
			   let sensorInfo = sensorInfo0 ? JSON.parse(sensorInfo0) : null;
			   
			 
		      if(sensorInfo!==null && sensorInfo.length>0){
				   that.getSensorInforClircle(sensorInfo)
			  }else{
				  searchSenorInfo().then((res) => {
				  		   			console.log("res2===88==")
				  		   			//console.log(res)
				  		   			sessionStorage.setItem('densorInfos',JSON.stringify(res))
									//let sensorInfo0 = sessionStorage.getItem('densorInfos')
									//let sensorInfo = sensorInfo0 ? JSON.parse(sensorInfo0) : null;
									console.log(sensorInfo[0])
									that.getSensorInforClircle(res)
				  		   			console.log("====end")
				   // this.connection=res[0]
				  }).catch(() => {
				  		   
				  });
			  }
		     
	 
	
      },
	  
	 getSensorInforClircle(sensorInfo){
		 let i=0;
		  
		 let _that =this
		 this.timer=setInterval(()=>{
			 console.log("searchSenorInfo*****")
			 console.log(sensorInfo[0])
			this.connection=sensorInfo[i++]
			_that.isActive=true
				 console.log("active="+this.isActive)
				setTimeout(function(){_that.isActive=false },1000)
			 if(i>=sensorInfo.length){i=0}
			  
		 },3000)
	 },
      //预警信息统计
      getAlert(){
        getWarningdatas().then((res) => {
			console.log("res================")
			console.log(res)
          let list=res.warnList;
          for(let i in list){
            list[i].date=this.setTime(list[i].warn_time);
			let yz_upper_upper = parseFloat(list[i].upper_upper_value.trim());
			let yz_upper = parseFloat(list[i].upper_value.trim());
            if (parseFloat(list[i].aw) > yz_upper_upper) {
              list[i].color='red';
            } else if (parseFloat(list[i].aw) > yz_upper) {
              list[i].color='yellow';
            } else if (parseFloat(list[i].aw) > 0) {
              list[i].color='green';
            }
          }
          this.alertList=list
        }).catch(() => {

        });
      },
      //最新数据
      getNewData(){
      
		console.log("getSensordatas---wai")
        getSensordatas().then((res) => {
			console.log("getSensordatas---nei")
          let list=res;
          for(let i in list){
            list[i].date=this.setTime(list[i].create_time);
          }
          this.newDataList=list
        }).catch(() => {

        });
      },
      //获取实时数据
      getRealTime(){
        ds.screen({type:8}).then(res => {
         // this.realTimeInfo=res.data.data
		 console.log("res=***===")
		  console.log(res)
		 this.realTimeInfo=123
        })
      },
      //获取飞线图数据
      getMapData(){
        getDevicesHasPosition().then((res) => {
          let from={
            fromName : '北京市',
            fromLatlng : [116.07673639616456, 40.110426254643315],
          }
         // let latlng=[[120.93141287481329, 40.93448132827849],[116.71809759843096, 37.96769678343516],[101.09220648866805, 36.568363251217576],[115.20215293852858, 38.886009413952934]]
          let list=res;
          for(let i in list){
            list[i].name=list[i].device_position;
            list[i].latlng=[list[i].longitude,list[i].latitude];
          }
          this.initMap(list,from)
        }).catch(() => {

        });
      },
      //终端运行统计
      getTerminal(){
        getSensosTypeCounts().then((res) => {
          let name=[];
          let list=[];
          for(let i in res){
            name.push(res[i].sensor_type?res[i].sensor_type:'');
            list.push(res[i].count);
          }
          this.initChart(name,list);
        }).catch(() => {

        });
      },
      //油品信息统计
      getOil(){
     
        getOilInfo().then((res) => {
          for(let i in res){
            res[i].value=res[i].oil_change_interval;
            res[i].name=res[i].oil_name;
          }
          this.initChart2(res);
        }).catch(() => {

        });
      },
      //设备类型统计
      getdevice(){
        getDeviceTypeStatistics().then((res) => {
          let name=[];
          let list=[];
          for(let i in res){
            name.push(res[i].device_type?res[i].device_type:'');
            list.push(res[i].deviceNum);
          }
          this.initChart3(name,list);
        }).catch(() => {

        });
      },
      //大屏切换
      toggle(){
        let element = document.getElementById("screen"); //指定全屏区域元素
        screenfull.toggle(element);
      },
      //设置时间格式
      setTime(dateTimeString){
        var dateTime = new Date(dateTimeString);
        var year = dateTime.getFullYear();
        var month = (dateTime.getMonth() + 1).toString().padStart(2, '0');
        var day = dateTime.getDate().toString().padStart(2, '0');
        var hours = dateTime.getHours().toString().padStart(2, '0');
        var minutes = dateTime.getMinutes().toString().padStart(2, '0');
        var seconds = dateTime.getSeconds().toString().padStart(2, '0');

        var localTimeString = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;

        return localTimeString
      },
      initChart3(name,data){
        var chartDom = document.getElementById('chart3');
        var myChart = echarts.init(chartDom);
        var option;
        option = {
          grid: {
            left: '5%',
            right: '5%',
            bottom: '0%',
            top:'10%',
            containLabel: true
          },
          tooltip: {
            trigger: 'item'
          },
          xAxis: {
            type: 'category',
            data: name,

            axisTick: {
              show: false // 这里设置为 false 隐藏 x 轴刻度线
            },
            axisLabel: {
              interval: 0,
              rotate: 20, // X轴标签倾斜 45 度
              textStyle: {
                color: '#fff'
              }
            },
          },
          yAxis: {
            type: 'value',
            splitLine: {
              show: true,
              lineStyle: {
                color: 'rgba(255,255,255,0.3)' // 设置网格线颜色为红色
              }
            },
            axisLabel: {
              textStyle: {
                color: '#fff'
              }
            },
          },
          series: [
            {
              data: data,
              type: 'bar',
              barWidth:'15',
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 1,
                  x2: 0,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: 'transparent' // 0% 处的颜色
                    },
                    {
                      offset: 0.6,
                      color: '#2EE2F3' // 100% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#2EE2F3' // 100% 处的颜色
                    }
                  ]
                }
              }
            }
          ]
        };

        option && myChart.setOption(option);
      },
      initChart2(data){
        var chartDom = document.getElementById('chart2');
        var myChart = echarts.init(chartDom);
        var option;
        option = {
          tooltip: {
            formatter: '{a} <br/>{b} : {c} ({d}%)',
            trigger: 'item',

          },
          grid: {
            top:'10',
          },
          legend: {
            bottom: '0%',
            left: 'center',
            textStyle: {
              color: '#fff'
            }
          },
          series: [
            {
              name: '油品信息',
              type: 'pie',
              radius: ['30%', '50%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 5,
              },
              label: {

                normal: {
                  formatter: '{b} {d}%',
                  textStyle: {
                    color: '#fff'  // 修改文字颜色为黑色
                  }
                },

              },

              labelLine: {
                show: true
              },
              data: data
            }
          ]
        };

        option && myChart.setOption(option);
      },
      initChart(name,data){
        var chartDom = document.getElementById('chart1');
        var myChart = echarts.init(chartDom);
        var option;
        option = {
          grid: {
            left: '5%',
            right: '5%',
            bottom: '3%',
            top:'20%',
            containLabel: true
          },
          tooltip: {
            trigger: 'item'
          },
          xAxis: {
            type: 'category',
            data: name,


            axisTick: {
              show: false // 这里设置为 false 隐藏 x 轴刻度线
            },
            axisLabel: {
              interval: 0,
              textStyle: {
                color: '#fff'
              }
            },
          },
          yAxis: {
            type: 'value',
            splitLine: {
              show: true,
              lineStyle: {
                color: 'rgba(255,255,255,0.3)' // 设置网格线颜色为红色
              }
            },
            axisLabel: {
              textStyle: {
                color: '#fff'
              }
            },
          },
          series: [
            {
              data: data,
              type: 'bar',
              barWidth:'15',
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 1,
                  x2: 0,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: 'transparent' // 0% 处的颜色
                    },
                    {
                      offset: 0.6,
                      color: '#FF503E' // 100% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#FF503E' // 100% 处的颜色
                    }
                  ]
                }
              }
            }
          ]
        };

        option && myChart.setOption(option);
      },
      initMap(geoCoordMap,from){
        let that=this;
        echarts.registerMap('china', this.worldAndChina)
        var chartDom = document.getElementById('map');
        let myChart = echarts.init(chartDom);
        // 起点名称和经纬度
        const fromName = from.fromName
        let fromLatlng = from.fromLatlng;
//飞线数据
        const linesData = geoCoordMap.map(row=>{
          return {
         
			 
				formName: row.name,
				toName: fromName,
			 
			coords:[
				row.latlng,
				fromLatlng
			],
            lineStyle: {
              color: '#FFE747',
              curveness: 0.2
            }
          }
        })

// 终点标点数据
        let effectData = geoCoordMap.map(row=>{
          return {
            value: row.latlng,
            name: row.name,
            id:row.id,
            device_name:row.device_name,
            device_code:row.device_code,
            device_type:row.device_type,
            lineStyle: {
              color: '#FFE747'
            }
          }
        })
        var options= {
          visualMap: {
            show: false,
            type: 'continuous',
            calculable: true,
            left: '0%',
            bottom: '3%',
            dimension: 0, // 指定用数据的『哪个维度』，映射到视觉元素上。『数据』即 series.data。 可以把 series.data 理解成一个二维数组,其中每个列是一个维度,默认取 data 中最后一个维度
            seriesIndex: 1,
            itemWidth: 15, // 图形的宽度，即长条的宽度。
            itemHeight: 68,
            min: 0,
            // max: that.mapmax,
            // color: ['#01fffd', '#1E74FF'],
            // color: ['#0B64F3', '#1A05B8'],
            color: ['#eb6624 ', '#eb6624'],
            textStyle: {
              color: '#ccc',
              fontSize: 12
            }
          },
          tooltip: {
            // 轮播框
            enterable: true,
            show: true,
            trigger: "item",
            triggerOn: "click",
            transitionDuration: 1,
            textStyle: {
              fontFamily: 'Microsoft YaHei',
              color: '#b8c8e5',
              fontSize: 13
            },
            backgroundColor: 'rgba(15,33,70,0.7)',
            borderColor: 'rgba(54,82,132,0.7)',
            borderWidth: 1,
            padding: [10, 14],
            extraCssText: 'z-index:4',
            formatter: function (parma) {
              console.log(parma,999);
              if(parma.seriesType === 'effectScatter'&&parma.name!='北京市') {
                // parma.name
                console.log(parma.data);
                that.parasInfo=parma.data;
                let element = `<div class="popver">
                <div class="popver_item">设备名称：${parma.data.device_name}</div>
                <div class="popver_item">运行状态：<span style="color:#4AD194">运行中</span></div>
                <div class="popver_btn" onclick="goDetails()">查看设备详情</div>
                </div>

                `
                return element
              } else {
                return  parma.name
              }
            }
          },
          legend: {
            show: false,
            color: ['#5bffde'],
            icon: 'circle', // 只显示小圆点

            top: '10.7%',
            // bottom: '2.8%',
            left: '2%',
            itemGap: 22,
            itemWidth: 8, // 图例图形宽度
            textStyle: {
              color: '#ffff',
              fontSize: 14,
              fontWeight: 'normal',
              // align: "left",
              padding: [0, 3],
              fontFamily: 'Microsoft YaHei'
            },
            itemHeight: 8 // 改变圆圈大小
          },
          geo: {
            // 真的地图
            type: 'map',
            map: 'china',
            //zoom: 3.398, // 缩放比例
			zoom: 5.398, // 缩放比例 xhl-20240717
            geoIndex: 1,
            left: '20%',
            top: '11%',
            large: true,
            aspectScale: 0.85, // 长宽比
            center:[118.22335860619073, 35.26546466238136],
            animationDurationUpdate:0,
            showLegendSymbol: true, // 存在legend时显示
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false,
                textStyle: {
                  color: '#fff'
                }
              }
            },
            roam: true,
            scaleLimit: {
              min: 0.7,
              max: 10
            },
            itemStyle: {
              normal: {
                color: 'none',
                areaColor:'#1c232b', //'#01032a',
                borderColor: '#666', // 4065eb
                borderWidth: 1
              },
              emphasis: {
                areaColor: '#34d1fc'
              }
            },
            select: {
              // 选中时样式
              label: {
                color: '#fff'
              },
              itemStyle: {
                areaColor: '#34d1fc'
              }
            },
            animation: true,

            data: []
            // data: that.maparr
          },
          series: [


            // 飞线
            {
              type: 'lines',
              zlevel: 5,
              effect: {
                show: true,
                period: 5, //箭头指向速度，值越小速度越快
                trailLength: 0, //特效尾迹长度[0,1]值越大，尾迹越长重
                symbol: 'arrow', //ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
                symbolSize: 8, //图标大小
              },
              lineStyle: {
                color: '#FFE747',
                type: 'dashed',
                width: 2, //尾迹线条宽度
                opacity: 1, //尾迹线条透明度
                curveness: 0.3 //尾迹线条曲直度
              },
              data: linesData,
              markPoint:{
                symbol: 'circle', //ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
                symbolSize: 8, //图标大小
              }
            },
            //起点
            {
              type: 'effectScatter',
              coordinateSystem: 'geo',
              zlevel: 6,
              rippleEffect: {
                //涟漪特效
                period: 4, //动画时间，值越小速度越快
                brushType: 'stroke', //波纹绘制方式 stroke, fill
                scale: 4 //波纹圆环最大限制，值越大波纹越大
              },
              label: {
                show: false,
                position: 'right', //显示位置
                offset: [5, 0], //偏移设置
                formatter: '{b}', //圆环显示文字
                color: 'red'
              },
              symbol: 'circle',
              symbolSize: function() {
                return 12; //圆环大小
              },
              itemStyle: {
                show: false,
                color: '#ff8400',
              },
              data: [{value: fromLatlng,name: fromName}]
            },
            // 终点
            {
              type: 'effectScatter',
              coordinateSystem: 'geo',
              zlevel: 6,
              rippleEffect: {
                //涟漪特效
                period: 4, //动画时间，值越小速度越快
                brushType: 'stroke', //波纹绘制方式 stroke, fill
                scale: 4 //波纹圆环最大限制，值越大波纹越大
              },
              label: {
                show: false,
                position: 'right', //显示位置
                offset: [5, 0], //偏移设置
                formatter: '{b}', //圆环显示文字
                color: 'red'
              },
              symbol: 'circle',
              symbolSize: function() {
                return 6; //圆环大小
              },
              itemStyle: {
                show: false,
                color: '#befaff',
              },
              data: effectData
            }
          ]
        }
        myChart.setOption(options);
      },
      decodePolygon(coordinate, encodeOffsets, encodeScale) {
        var result = [];
        var prevX = encodeOffsets[0];
        var prevY = encodeOffsets[1];
        for (var i = 0; i < coordinate.length; i += 2) {
          var x = coordinate.charCodeAt(i) - 64;
          var y = coordinate.charCodeAt(i + 1) - 64;
          // ZigZag decoding
          x = (x >> 1) ^ -(x & 1);
          y = (y >> 1) ^ -(y & 1);
          // Delta deocding
          x += prevX;
          y += prevY;
          prevX = x;
          prevY = y;
          // Dequantize
          result.push([x / encodeScale, y / encodeScale]);
        }
        return result;
      },
      decode(json) {
        if (!json.UTF8Encoding) {
          return json;
        }
        var encodeScale = json.UTF8Scale;
        if (encodeScale == null) {
          encodeScale = 1024;
        }
        var features = json.features;
        for (var f = 0; f < features.length; f++) {
          var feature = features[f];
          var geometry = feature.geometry;
          var coordinates = geometry.coordinates;
          var encodeOffsets = geometry.encodeOffsets;
          for (var c = 0; c < coordinates.length; c++) {
            var coordinate = coordinates[c];
            if (geometry.type === "Polygon") {
              coordinates[c] = this.decodePolygon(
                coordinate,
                encodeOffsets[c],
                encodeScale
              );
            } else if (geometry.type === "MultiPolygon") {
              for (var c2 = 0; c2 < coordinate.length; c2++) {
                var polygon = coordinate[c2];
                coordinate[c2] = this.decodePolygon(
                  polygon,
                  encodeOffsets[c][c2],
                  encodeScale
                );
              }
            }
          }
        }
        // Has been decoded
        json.UTF8Encoding = false;
        return json;
      }
    }
  }
</script>

<style scoped lang="less">
//.admin-layout .admin-layout-content{
//  padding: 0 !important;
//}
.active {
// background-color: #0f0; /* 鼠标滑过时颜色变为绿色 */
animation: slide-in 0.5s forwards; /* 触发动画 */
}

@keyframes slide-in {
	0% {
	transform: translateY(-100%); /* 起始状态向左滑出 */
	}
	100% {
	transform: translateY(0); /* 结束状态在原位置 */
	}
}
#chart1{
  width: 100%;
  height: 230px;
}
#chart2{
  width: 100%;
  height: 320px;
  position: relative;
  z-index: 1;
}
.yuan{
  width: 100%;
  height: 320px;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  img{
    width: 224px;
    height: 224px;
  }
}
#chart3{
  width: 100%;
  height: 230px;
}
/deep/.popver{
  .popver_btn{
    border: 1px solid #19FCFF;
    width: 91px;
    height: 21px;
    border-radius: 21px;
    text-align: center;
    line-height: 19px;
    font-size: 12px;
    margin: auto;
    margin-top: 6px;
    color: #19FCFF;
  }
}
.container{
  position: relative;
  height: 1080px;
  #map{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
  .screenbox{
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    .contentBox{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      display: flex;
      height: 1080px;
      padding:0 20px;
      padding-top: 60px;
      //z-index: 2;
      .left{
        width: 466px;
        height: 100%;
        background: url("../assets/img/leftBg.png") no-repeat top;
        background-size: 100%;
        position: relative;
        z-index: 2;
        .plate{
          padding: 30px;
          width: 100%;
          .listBox{
            margin-top: 12px;
            .tab{
              width: 100%;
              display: flex;
              height: 28px;
              line-height: 28px;
              align-items: center;
              padding-left: 12px;
              border-bottom: 1px solid #4885CE;
              background: linear-gradient(0deg, rgba(70,85,199,0.2) 0%, rgba(50,137,255,0) 100%);
              .item{
                font-size: 13px;
                color: #fff;
              }
            }
            .rowBox{
              height: 333px;
              overflow-y: auto;
            }
            .row{
              width: 100%;
              display: flex;
              align-items: center;
              margin-top: 3px;
              background: rgba(89,106,236,0.09);
              padding-left: 12px;
              .item{
                font-size: 12px;
                height: 30px;
                line-height: 30px;
              }
            }
          }
          .deviceName{
            width: 100%;
            height: 82px;
            background: url("../assets/img/devBg.png") no-repeat top;
            background-size: 100%;
            line-height: 82px;
            text-align: center;
            font-size: 18px;
            font-weight: bold;
            color: #1CFEFF;
			overflow: hidden;
			.deviceNameOi{
				height: 41px;
				overflow: hidden;
				line-height: 41px;
				margin-top: 20px;
			}
          }
          .timeBox{
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            margin-top: 15px;
            .item{
              width: 115px;
              height: 119px;
              text-align: center;

              .time{
                font-size: 26px;
                font-weight: bold;
                color: #fff;
                margin-top: 28px;
				overflow: hidden;
              }
              .name{
                font-size: 12px;
                color: #fff;
              }
            }
            .item1{
              background: url("../assets/img/time1.png") no-repeat top;
              background-size: 100%;
            }
            .item2{
              width: 146px;
              height: 153px;
              background: url("../assets/img/time2.png") no-repeat top;
              background-size: 100%;
              .time{
                margin-top: 42px;
              }
            }
            .item3{
              background: url("../assets/img/time3.png") no-repeat top;
              background-size: 100%;
            }
          }
          .ptit{
            width: 100%;
            height: 42px;
            background: url("../assets/img/tbg.png") no-repeat top;
            background-size: 100%;
            display: flex;
            align-items: center;
            font-family: Microsoft YaHei;
            font-weight: bold;
            font-size: 18px;
            color: #E5EFFF;
            font-style: italic;
            img{
              width: 35px;
              height: 35px;
              margin-left: 10px;
            }
          }
          .devBox{
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            margin-top: 15px;
			cursor: pointer;
            .item{
              width: 90px;
              .info{
                width: 100%;
                text-align: center;
                transform: translateY(25px);
                .num{
                  font-size: 27px;
                  font-weight: bold;
                }
                .name{
                  color: #FEFFFF;
                  font-size: 12px;
                }
              }
              img{
                width: 90px;
                height: 70px;
              }
            }
          }
        }
      }
      .center{
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        position: relative;
        .plate {
          padding: 30px;
          width: 100%;
          position: relative;
          z-index: 3;
          transform: translateY(-10px);
          .ptit{
            width: 400px;
            height: 42px;
            background: url("../assets/img/tbg.png") no-repeat top;
            background-size: 100%;
            display: flex;
            align-items: center;
            font-family: Microsoft YaHei;
            font-weight: bold;
            font-size: 18px;
            color: #E5EFFF;
            font-style: italic;
            img{
              width: 35px;
              height: 35px;
              margin-left: 10px;
            }
          }
          .listBox {
            margin-top: 12px;

            .tab {
              width: 100%;
              display: flex;
              height: 28px;
              line-height: 28px;
              align-items: center;
              padding-left: 12px;
              border-bottom: 1px solid #4885CE;
              background: linear-gradient(0deg, rgba(70, 85, 199, 0.2) 0%, rgba(50, 137, 255, 0) 100%);

              .item {
                font-size: 13px;
                color: #fff;
              }
            }
            .rowBox{
              height: 172px;
              overflow-y: auto;
            }
            .row {
              width: 100%;
              display: flex;
              align-items: center;
              margin-top: 3px;
              background: rgba(89, 106, 236, 0.09);
              padding-left: 12px;

              .item {
                font-size: 12px;
                height: 30px;
                line-height: 30px;
                overflow: hidden;
                padding-right: 5px;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
          }
        }
        .dataBox{
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 130px;
          margin-top: 55px;
          position: relative;
          z-index: 3;
          .tit{
            img{
              width: 59px;
              height: 47px;
            }
          }
          .item{
            width: 185px;
            height: 55px;
            display: flex;
            align-items:center;
            justify-content: center;
            font-size: 24px;
            font-weight: bold;
            span{
              margin-left: 40px;
            }
          }
          .item1{
            background: url("../assets/img/name1.png") no-repeat top;
            background-size: 100%;
            color:#23FFFC;
          }
          .item2{
            background: url("../assets/img/name2.png") no-repeat top;
            background-size: 100%;
            color:#FED52F;
          }
          .item3{
            background: url("../assets/img/name3.png") no-repeat top;
            background-size: 100%;
            color:#239AFF;
          }
        }
      }
      .right{
        width: 466px;
        height: 100%;
        background: url("../assets/img/rightBg.png") no-repeat top;
        background-size: 100%;
        padding: 30px 0;
        position: relative;
        z-index: 2;
        .plate {

          width: 100%;
          .ptit{
            width: 400px;
            height: 42px;
            background: url("../assets/img/tbg.png") no-repeat top;
            background-size: 100%;
            display: flex;
            align-items: center;
            font-family: Microsoft YaHei;
            font-weight: bold;
            font-size: 18px;
            color: #E5EFFF;
            font-style: italic;
            img{
              width: 35px;
              height: 35px;
              margin-left: 10px;
            }
          }
        }
      }
    }
    .titBox{
      width: 100%;
      height: 90px;
      position: relative;
      z-index: 2;
      .titbg{
        width: 100%;
        height: 90px;
      }
      .dateBox{
        position: absolute;
        right: 57px;
        top: 26px;
        display: flex;
        align-items: center;
        z-index: 1;
        font-size: 14px;
        font-weight: bold;
        color: #19FCFF;
        img{
          margin-left: 24px;
          width: 20px;
          height: 20px;
        }
      }
    }
  }
}
</style>
